<template>
    <div class="statistics-container">
        <div class="statistics-container-line-1">
            <div class="line-1-middle">
                <div ref="projectDoingRef" class="line-1-middle-content">
                    <!-- {{ doingOrderCount }} -->
                </div>
            </div>
            <div class="line-1-right">
                <div class="line-1-right-top">
                    <el-radio-group v-model="projectStatisticForm.timeType" size="large"
                        @change="getOrderStaticsResult">
                        <el-radio-button label="星期" value="0" />
                        <el-radio-button label="月" value="1" />
                        <el-radio-button label="季度" value="2" />
                        <el-radio-button label="年" value="3" />
                    </el-radio-group>
                </div>

                <div class="line-1-right-bottom">
                    <div class="line-1-right-bottom-left">
                        <div class="line-1-right-bottom-left-top">
                            <el-select style="width: 100%;" placeholder="工单类型" v-model="projectStatisticForm.orderType"
                                @change="getOrderStaticsResult">
                                <el-option key=0 label="总体完工统计" value=0></el-option>
                                <el-option v-for="(item, index) in orderTypesList" :key="index + 1"
                                    :label="item.description" :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="line-1-right-bottom-left-bottom">
                            <span>{{ orderDoneResult }}</span>
                        </div>
                    </div>
                    <!-- <div class="line-1-right-bottom-right">
                        <div class="line-1-right-bottom-right-top">
                            <el-select style="width: 100%;" placeholder="产品型号"
                                v-model="projectStatisticForm.deviceType">
                                <el-option key=0 label="全部产品型号" value=0></el-option>
                                <el-option key=1 label="产品型号1" value=1></el-option>
                                <el-option key=2 label="产品型号2" value=2></el-option>
                                <el-option key=3 label="产品型号3" value=3></el-option>
                            </el-select>
                        </div>
                        <div class="line-1-right-bottom-right-bottom">
                            <span>20</span>
                        </div>
                    </div> -->
                </div>
            </div>

            <div class="line-1-left">
                <div class="line-1-left-top">
                    <el-select style="width: 50%;" v-model="satisfactionBarForm.orderType" placeholder="工单类型" clearable
                        @change="manyiduChange">
                        <!-- <el-option key=0 label="整体满意度" value=null></el-option> -->
                        <el-option v-for="(item, index) in orderTypesList" :key="index + 1" :label="item.description"
                            :value="item.code">
                        </el-option>
                    </el-select>
                    &nbsp;&nbsp;
                    <el-select style="width: 50%;" v-model="satisfactionBarForm.labelId" placeholder="评价标签" clearable
                        @change="manyiduChange">
                        <el-option v-for="(item, index) in manyiduList" :key="index + 1" :label="item.value"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div ref="satisfactionBarRef" class="line-1-left-bottom">


                </div>
            </div>
        </div>
        <div class="statistics-container-line-3">
            <!-- 保内（保内设备修理、新船调试、在航改造、备件更换、二次维修）维修次数统计分析 -->
            <el-row :gutter="16" style="width: 100%; height: 100%; text-align: center;">
                <el-col :span="4">
                    <div class="statistic-card">
                        <el-statistic :value="null == repairResult ? 0 : repairResult.totalResult.monthNum">
                            <template #title>
                                <div style="display: inline-flex; align-items: center;">
                                    保内总体修理次数
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>同比上月</span>
                                <span v-if="null == repairResult">
                                    0%
                                </span>
                                <span class="green"
                                    v-if="null != repairResult && repairResult.totalResult.change >= 0">
                                    {{ repairResult.totalResult.change }}%
                                    <el-icon>
                                        <CaretTop />
                                    </el-icon>
                                </span>
                                <span class="red"
                                    v-if="null != repairResult && repairResult.totalResult.change < 0">
                                    {{ repairResult.totalResult.change }}%
                                    <el-icon>
                                        <CaretBottom />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="statistic-card">
                        <el-statistic :value="null == repairResult ? 0 : repairResult.repairFirst.monthNum">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    保内首次修理次数
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>同比上月</span>
                                <span v-if="null == repairResult">
                                    0%
                                </span>
                                <span class="green"
                                    v-if="null != repairResult && repairResult.repairFirst.change >= 0">
                                    {{ repairResult.repairFirst.change }}%
                                    <el-icon>
                                        <CaretTop />
                                    </el-icon>
                                </span>
                                <span class="red"
                                    v-if="null != repairResult && repairResult.repairFirst.change < 0">
                                    {{ repairResult.repairFirst.change }}%
                                    <el-icon>
                                        <CaretBottom />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="statistic-card">
                        <el-statistic :value="null == repairResult ? 0 : repairResult.newShip.monthNum">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    新船调试修理次数
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>同比上月</span>
                                <span v-if="null == repairResult">
                                    0%
                                </span>
                                <span class="green"
                                    v-if="null != repairResult && repairResult.newShip.change >= 0">
                                    {{ repairResult.newShip.change }}%
                                    <el-icon>
                                        <CaretTop />
                                    </el-icon>
                                </span>
                                <span class="red"
                                    v-if="null != repairResult && repairResult.newShip.change < 0">
                                    {{ repairResult.newShip.change }}%
                                    <el-icon>
                                        <CaretBottom />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="statistic-card">
                        <el-statistic :value="null == repairResult ? 0 : repairResult.remould.monthNum">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    在航改造修理次数
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>同比上月</span>
                                <span v-if="null == repairResult">
                                    0%
                                </span>
                                <span class="green"
                                    v-if="null != repairResult && repairResult.remould.change >= 0">
                                    {{ repairResult.remould.change }}%
                                    <el-icon>
                                        <CaretTop />
                                    </el-icon>
                                </span>
                                <span class="red"
                                    v-if="null != repairResult && repairResult.remould.change < 0">
                                    {{ repairResult.remould.change }}%
                                    <el-icon>
                                        <CaretBottom />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="statistic-card">
                        <el-statistic :value="null == repairResult ? 0 : repairResult.replace.monthNum">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    备件更换修理次数
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>同比上月</span>
                                <span v-if="null == repairResult">
                                    0%
                                </span>
                                <span class="green"
                                    v-if="null != repairResult && repairResult.replace.change >= 0">
                                    {{ repairResult.replace.change }}%
                                    <el-icon>
                                        <CaretTop />
                                    </el-icon>
                                </span>
                                <span class="red"
                                    v-if="null != repairResult && repairResult.replace.change < 0">
                                    {{ repairResult.replace.change }}%
                                    <el-icon>
                                        <CaretBottom />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="statistic-card">
                        <el-statistic :value="null == repairResult ? 0 : repairResult.repairNotFirst.monthNum">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    二次维修修理次数
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>同比上月</span>
                                <span v-if="null == repairResult">
                                    0%
                                </span>
                                <span class="green"
                                    v-if="null != repairResult && repairResult.repairNotFirst.change >= 0">
                                    {{ repairResult.repairNotFirst.change }}%
                                    <el-icon>
                                        <CaretTop />
                                    </el-icon>
                                </span>
                                <span class="red"
                                    v-if="null != repairResult && repairResult.repairNotFirst.change < 0">
                                    {{ repairResult.repairNotFirst.change }}%
                                    <el-icon>
                                        <CaretBottom />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- <div class="statistics-container-line-2">
            <div class="line-2-left">
                <div class="line-2-left-top">
                    <el-radio-group v-model="deviceForm.timeType" size="large">
                        <el-radio-button label="星期" value="0" />
                        <el-radio-button label="月" value="1" />
                        <el-radio-button label="季度" value="2" />
                        <el-radio-button label="年" value="3" />
                    </el-radio-group>
                </div>

                <div class="line-2-left-bottom">
                    <div ref="deviceBar1Ref">

                    </div>
                    <div ref="deviceBar2Ref">

                    </div>

                    <div ref="deviceBar3Ref">

                    </div>

                    <div ref="deviceBar4Ref">

                    </div>
                </div>
            </div>
        </div> -->

        <!-- <div class="statistics-container-line-4">
            <div class="line-4-left">
                <div class="line-4-left-top">
                    <el-radio-group v-model="engineerForm.timeType" size="large">
                        <el-radio-button label="星期" value="0" />
                        <el-radio-button label="月" value="1" />
                        <el-radio-button label="季度" value="2" />
                        <el-radio-button label="年" value="3" />
                    </el-radio-group>
                </div>
                <div class="line-4-left-bottom">
                    <div ref="engineerBar1Ref">

                    </div>
                    <div ref="engineerBar2Ref">

                    </div>
                </div>
            </div>
        </div> -->
        <div class="statistics-container-line-5">
            <el-table :data="tableData" height="300" border style="width: 100%">
                <el-table-column prop="productTypeName" label="产品名" align="center">
                </el-table-column>
                <el-table-column prop="weekCount" label="发货量（周）" align="center">
                </el-table-column>
                <el-table-column prop="monthCount" label="发货量（月）" align="center">
                </el-table-column>
                <el-table-column prop="quarterCount" label="发货量（季）" align="center">
                </el-table-column>
                <el-table-column prop="yearCount" label="发货量（年）" align="center">
                </el-table-column>
                <el-table-column prop="underWarrantyCount" label="在保数" align="center">
                </el-table-column>
                <el-table-column prop="repairCount" label="维修次数" align="center">
                </el-table-column>
                <el-table-column prop="replaceCount" label="更换次数" align="center">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from "vue"
import * as echarts from 'echarts';
import { api_project_constant, api_orders_customerScoreLabels, api_orders_comment_statistic, api_orders_done_statistic } from "~/api/ordersApi"
import { deliverStatistic, repairResultInfo } from "~/api/productApi";


// 工单类型
const orderTypesList = ref([])

// 满意度各项指标
const manyiduList = ref([])

// 满意度统计
let chartInstance1 = null;
const satisfactionBarRef = ref(null);
const satisfactionBarForm = reactive({
    orderType: null,
    labelId: null
})

// 项目统计（工单）
const doingOrderCount = ref(0)
let chartInstance2 = null;
const projectDoingRef = ref(null);
const projectStatisticForm = reactive({
    orderType: "0",
    timeType: "0",
    // projectType: "0",
    // deviceType: "0"
})
const orderStatisticResult = ref(null);
const orderDoneResult = ref(0);


// 产品发货统计
const tableData = ref([])

// 产品维修
// const repairResult = reactive({
//     totalResult: null,
//     newShip: null,
//     repairFirst: null,
//     remould: null,
//     replace: null,
//     repairNotFirst: null
// })

const repairResult = ref(null);

// 生命周期函数
onMounted(async () => {

    //获取订单类型
    await initManyiduLabel()
    //console.log(JSON.stringify(manyiduList.value))

    //初始化项目在执行数量
    initProjectDoing()

    //初始化满意度饼图
    initSatisfactionBar()

    //初始化产品发货统计
    initDeviceBar()

    //初始化产品维修统计
    initRepairResult()
})

//获取订单状态
async function initManyiduLabel() {
    await api_project_constant().then(res => {
        if (res && res.orderTypes) {
            orderTypesList.value = res.orderTypes
        }
    })
    await api_orders_customerScoreLabels().then(res => {
        if (res) {
            manyiduList.value = res
        }
    })
}

//项目统计（工单）
function initProjectDoing() {
    api_orders_done_statistic().then(res => {
        let doingOrder = 0
        if (res.allOrderStatistic && res.allOrderStatistic.onGoingCount) {
            doingOrder = res.allOrderStatistic.onGoingCount
            doingOrderCount.value = doingOrder
        }
        chartInstance2 = echarts.init(projectDoingRef.value);
        const option = {
            tooltip: {
                formatter: '{b} : {c}'
            },
            series: [
                {
                    name: '信息',
                    type: 'gauge',
                    radius:'100%',
                    detail: {
                        formatter: '{value}'
                    },
                    max: Math.ceil((doingOrder + 1) / 10) * 10,
                    data: [
                        {
                            value: doingOrder,
                            name: '进行中工单'
                        }
                    ]
                }
            ]
        };
        chartInstance2.setOption(option);

        orderStatisticResult.value = res
        getOrderStaticsResult()
    })
}

function getOrderStaticsResult() {
    let orderType = projectStatisticForm.orderType
    //0星期 1月 2季度 3年
    let timeType = projectStatisticForm.timeType
    if (null == orderStatisticResult.value) {
        return 0
    }
    // console.log(JSON.stringify(orderStatisticResult.value.allOrderStatistic))

    if (orderType == 0 || orderType == "0") {
        if (timeType == "0" || timeType == 0) {
            orderDoneResult.value = orderStatisticResult.value.allOrderStatistic.weekCount
        } else if (timeType == "1" || timeType == 1) {
            orderDoneResult.value = orderStatisticResult.value.allOrderStatistic.monthCount
        } else if (timeType == "2" || timeType == 2) {
            orderDoneResult.value = orderStatisticResult.value.allOrderStatistic.quarterCount
        } else if (timeType == "3" || timeType == 3) {
            orderDoneResult.value = orderStatisticResult.value.allOrderStatistic.yearCount
        }
    } else {

        if (orderStatisticResult.value.orderStatisticDtoList) {

            let item = orderStatisticResult.value.orderStatisticDtoList.find(x => x.orderType == orderType)
            if (null != item) {
                if (timeType == "0" || timeType == 0) {
                    orderDoneResult.value = item.weekCount
                } else if (timeType == "1" || timeType == 1) {
                    orderDoneResult.value = item.monthCount
                } else if (timeType == "2" || timeType == 2) {
                    orderDoneResult.value = item.quarterCount
                } else if (timeType == "3" || timeType == 3) {
                    orderDoneResult.value = item.yearCount
                }
            } else {
                orderDoneResult.value = 0
            }

        } else {
            orderDoneResult.value = 0
        }
    }

    console.log("orderType,timeType,result:", orderType, timeType, orderDoneResult.value)
}

// 满意度调查
function initSatisfactionBar() {

    //满意度调查
    api_orders_comment_statistic(satisfactionBarForm).then(res => {
        //console.log(JSON.stringify(res))
        chartInstance1 = echarts.init(satisfactionBarRef.value);
        const option = {
            title: {
                text: '满意度调查',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '星级',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: res.num1, name: '一星' },
                        { value: res.num2, name: '两星' },
                        { value: res.num3, name: '三星' },
                        { value: res.num4, name: '四星' },
                        { value: res.num5, name: '五星' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        show: true,
                        formatter: '{b}:{d}%' // 显示标签和数据百分比
                    }
                },
            ]
        };
        chartInstance1.setOption(option);
    })
}

function manyiduChange(e) {
    console.log('manyiduChange: ', e)

    // if (e == 0) {
    //     satisfactionBarForm.orderType = null
    //     satisfactionBarForm.labelId = null
    // } else if (e.indexOf("#") != -1) {
    //     satisfactionBarForm.orderType = e.substring(1, 2)
    //     satisfactionBarForm.labelId = null
    // } else if (e.indexOf("&") != -1) {
    //     satisfactionBarForm.orderType = null
    //     satisfactionBarForm.labelId = e.substring(1, 2)
    // }

    //重新发起请求
    initSatisfactionBar()
}

// 初始化产品发货统计
function initDeviceBar() {
    deliverStatistic().then(res => {
        if (res && res.productDeliverDtoList) {
            tableData.value = res.productDeliverDtoList
        }
    })
}

// 初始化产品维修统计
function initRepairResult() {
    repairResultInfo().then(res => {
        repairResult.value = res
    })
}

// 销毁ECharts实例
onUnmounted(() => {
    if (chartInstance1 != null && chartInstance1.dispose) {
        chartInstance1.dispose();
    }
    if (chartInstance2 != null && chartInstance2.dispose) {
        chartInstance2.dispose();
    }
});

</script>

<style scoped>
.statistics-container {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .statistics-container-line-1 {
        height: 300px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .line-1-left {
            padding: 10px;
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 40%;

            .line-1-left-top {
                width: 80%;
                height: 50px;

                display: flex;
                justify-content: flex-start;
            }

            .line-1-left-bottom {
                width: 100%;
                flex: auto;
            }
        }

        .line-1-middle {
            width: 30%;
            height: 100%;

            .line-1-middle-content {
                height: 100%;
                width: 100%;
            }
        }

        .line-1-right {
            flex: auto;
            padding: 10px;
            display: flex;
            flex-direction: column;
            height: 100%;

            .line-1-right-top {
                height: 50px;
            }

            .line-1-right-bottom {
                flex: auto;
            }

            .line-1-right-bottom {
                display: flex;
                width: 100%;
                height: 100%;
                justify-content: space-around;
                align-items: center;


                .line-1-right-bottom-left {
                    display: flex;
                    width: 100%;
                    height: 100%;
                    flex-direction: column;

                    .line-1-right-bottom-left-top {
                        height: 20px;
                        width: 50%;
                    }

                    .line-1-right-bottom-left-bottom {
                        flex: auto;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        span {
                            font-size: 50px;
                            color: rgb(127, 150, 255);
                            font-weight: 800;
                        }
                    }
                }

                .line-1-right-bottom-right {
                    display: flex;
                    width: 50%;
                    height: 100%;
                    flex-direction: column;
                    justify-content: center;

                    .line-1-right-bottom-right-top {
                        height: 20px;
                        width: 50%;
                    }

                    .line-1-right-bottom-right-bottom {
                        flex: auto;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        span {
                            font-size: 50px;
                            color: rgb(127, 150, 255);
                            font-weight: 800;
                        }
                    }
                }
            }
        }
    }

    .statistics-container-line-2 {
        height: 300px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .line-2-left {
            padding: 10px;
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            border: 2px solid #F2F2F2;

            .line-2-left-top {
                width: 50%;
                height: 50px;
            }

            .line-2-left-bottom {
                flex: auto;
                display: flex;
                justify-content: space-between;

                div {
                    width: 25%;
                    height: 100%;
                }
            }
        }
    }

    .statistics-container-line-3 {
        height: 120px;
        padding: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        border-top: 2px solid #F2F2F2;


        .green {
            color: green;
        }

        .red {
            color: red;
        }

        ::v-deep .el-statistic__number {
            color: rgb(127, 150, 255);
            font-size: 20px;
            font-weight: 800;
        }
    }

    .statistics-container-line-4 {
        height: 300px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .line-4-left {
            padding: 10px;
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            border: 2px solid #F2F2F2;

            .line-2-left-top {
                width: 50%;
                height: 50px;
            }

            .line-2-left-bottom {
                flex: auto;
                display: flex;
                justify-content: space-between;

                div {
                    width: 25%;
                    height: 100%;
                }
            }
        }
    }

    ::v-deep .el-radio-button--large .el-radio-button__inner {
        padding: 10px;
    }
}
</style>